<template>
  <div class="variable-stability">
    <a-row>
      <span>选择变量：</span>
      <a-select
        style="width: 40%"
        mode="multiple"
        placeholder="请选择变量(可多选)"
        v-model="variables"
        @change="handleChange"
      >
        <a-select-option v-for="item in allVariables" :key="item" :value="item">{{ item }}</a-select-option>
      </a-select>
    </a-row>
    <a-row v-for="item in chartOption" :key="item.title">
      <div class="chart-wrapper">
        <echart :option="item.option" v-if="item.option" />
        <div v-else class="empty-state">
          <Empty :description="item.emptyText" />
        </div>
      </div>
    </a-row>
  </div>
</template>

<script>
import { Echart } from '@/components'
import { Empty } from 'ant-design-vue'
import { deepMerge, echartConfig } from './echart.config'

export default {
  name: 'VariableStability',
  components: {
    Echart,
    Empty,
  },
  props: {
    alertConfigField: {
      type: Array,
      default: () => [],
    },
    queryParam: {
      type: Object,
      default: () => ({}),
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    alertConfigField: {
      handler(newVal) {
        this.allVariables = newVal
        this.variables = newVal
      },
      deep: true,
      immediate: true,
    },
    dataSource: {
      handler(newVal) {
        this.initChart(newVal)
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      allVariables: [],
      variables: [],
      chartOption: {},
      loading: false,
    }
  },
  methods: {
    initChart(val) {
      console.log('initChart', val)
      if (val.length === 0) {
        return
      }
      const [first] = val
      const { labels, B, M, D, W } = first
      const renderOption = (option) => {
        if (!option.data) {
          return null
        }
        const { title, data } = option
        const series = this.alertConfigField.map((item) => ({
          data: data[item],
          type: 'line',
          name: item,
          smooth: true,
        }))
        return deepMerge(echartConfig, {
          title: {
            text: title,
          },
          xAxis: {
            data: labels,
          },
          legend: {
            data: this.alertConfigField,
          },
          series,
        })
      }
      this.chartOption = [
        {
          title: 'PSI(对比建模)',
          data: B,
          emptyText: '对比建模暂无数据',
        },
        {
          title: 'PSI(对比上月)',
          data: M,
          emptyText: '对比上月暂无数据',
        },
        {
          title: 'PSI(对比每日)',
          data: D,
          emptyText: '对比每日暂无数据',
        },
        {
          title: 'PSI(对比每周)',
          data: W,
          emptyText: '对比每周暂无数据',
        },
      ].map((item) => {
        return {
          option: renderOption(item),
          emptyText: item.emptyText,
        }
      })
    },
    handleChange() {
      this.$emit('variableChange', this.variables)
    },
  },
}
</script>

<style lang="less" scoped>
.variable-stability {
  .chart-wrapper {
    margin-top: 12px;
    padding: 36px;
    .empty-state {
      padding: 40px 0;
      text-align: center;
      background-color: rgb(251, 251, 251);
      border-radius: 4px;
      border: 1px solid rgb(238, 238, 238);
    }
  }
}
</style>
